<template>
  <div class="teaching-mission-filter">
    <div class="filter-container">
      <el-select 
        v-model="localFilters.termId" 
        placeholder="选择学期" 
        @change="handleTermChange" 
        style="width: 200px;"
      >
        <el-option
          v-for="item in termOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      
      <el-select 
        v-model="localFilters.courseId" 
        placeholder="选择课程" 
        clearable 
        @change="handleFilterChange" 
        style="width: 200px;"
      >
        <el-option
          v-for="item in filteredCourseOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      
      <el-input
        v-model="localFilters.keyword"
        placeholder="输入关键词搜索"
        clearable
        style="width: 200px;"
        @clear="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      
      <el-button type="primary" @click="handleFilterChange">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'

const props = defineProps({
  filters: {
    type: Object,
    default: () => ({})
  },
  termOptions: {
    type: Array,
    default: () => []
  },
  filteredCourseOptions: {
    type: Array,
    default: () => []
  },
  defaultTermId: {
    type: [String, Number],
    default: null
  }
})

const emit = defineEmits(['update:filters', 'term-change', 'filter-change', 'search', 'reset'])

const localFilters = reactive({
  termId: '',
  courseId: '',
  keyword: ''
})

// 监听外部过滤器变化
watch(() => props.filters, (newFilters) => {
  Object.assign(localFilters, newFilters)
}, { immediate: true, deep: true })

const handleTermChange = () => {
  localFilters.courseId = ''
  emit('update:filters', { ...localFilters })
  emit('term-change', localFilters.termId)
  emit('filter-change', { ...localFilters })
}

const handleFilterChange = () => {
  emit('update:filters', { ...localFilters })
  emit('filter-change', { ...localFilters })
}

const handleSearch = () => {
  emit('update:filters', { ...localFilters })
  emit('search', localFilters.keyword)
  emit('filter-change', { ...localFilters })
}

const handleReset = () => {
  Object.assign(localFilters, {
    termId: props.defaultTermId || '',
    courseId: '',
    keyword: ''
  })
  emit('update:filters', { ...localFilters })
  emit('reset')
}

// 防抖搜索
let searchTimer = null
const debounceSearch = () => {
  clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
    handleSearch()
  }, 300)
}

// 监听关键词变化进行防抖搜索
watch(() => localFilters.keyword, (newKeyword, oldKeyword) => {
  // 只有当关键词确实改变时才触发防抖搜索
  if (newKeyword !== oldKeyword) {
    debounceSearch()
  }
})
</script>

<style scoped>
.teaching-mission-filter {
  margin-bottom: 20px;
}

.filter-container {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-container .el-select,
  .filter-container .el-input {
    width: 100% !important;
  }
}
</style>
